<template>
	<div class="more">
		<ul class="flex-left flex-w">
			<router-link tag="li" :to="'/detail/nav-detail/'+ item.category_id + '?type=1'" class="align-center pt60rem pb60rem border-r border-b" v-for="item in data" :key="item.category_id" v-if="type=='1'">
 				<p class="fs26rem c333 pt80rem" :style="{ backgroundImage: 'url(' + img_url + item.category_pic + ')' }">{{ item.category_name }}</p>
			</router-link>
			<router-link tag="li" :to="'/ordering/detail/Ordering-nav/'+ item.category_id + '?type=2'" class="align-center pt60rem pb60rem border-r border-b" v-for="item in data" :key="item.category_id" v-if="type=='2'">
 				<p class="fs26rem c333 pt80rem" :style="{ backgroundImage: 'url(' + img_url + item.category_pic + ')' }">{{ item.category_name }}</p>
			</router-link>
		</ul>
	</div>
</template>

<script>
import { getMoreCategory } from "@/api/home";
	export default{
		data()
		{
			return{
				data    : [],
				img_url : process.env.IMG_URL,
				type   	: this.$route.query.type,
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				getMoreCategory(this.type).then(res => {
					this.data = res.data;
				})
			}
		}
	}
</script>

<style lang="less">
	.more{
		ul{
			overflow: hidden;
			li{
				width: 33.15%;
				p{
					background-repeat: no-repeat;
					background-size: 75/28rem 75/28rem;
					background-position: top center;
				}
				&:nth-child(1) p{
					background-image: url(../../assets/more/more_icon1.png);
				}
				&:nth-child(3n){
					border-right: none;
				}
			}
		}
	}
</style>
